<script lang="ts" setup>
import { useTemplateRef, onMounted, ref } from 'vue'
import { FreeMode, Navigation } from 'swiper/modules'
import type { SwiperOptions, Swiper } from 'swiper/types'
import 'swiper/element/css/free-mode'
import 'swiper/element/css/navigation'

const swiperProps = ref<SwiperOptions>({
  injectStyles: [`:host .swiper { overflow: visible; }`],
  freeMode: true,
  spaceBetween: 4,
  slidesPerView: 'auto',
  modules: [FreeMode, Navigation],
  breakpoints: {
    1024: {
      slidesPerView: 3,
      spaceBetween: 8,
    },
  },
  navigation: {
    enabled: false,
  },
})
const btnPrevRef = useTemplateRef<HTMLDivElement | null>('btnPrevRef')
const btnNextRef = useTemplateRef<HTMLDivElement | null>('btnNextRef')

const swiperRef = useTemplateRef<(HTMLElement & { swiper: Swiper }) | null>('swiperRef')
onMounted(() => {
  if (!swiperRef.value || !btnPrevRef.value || !btnNextRef.value) {
    return
  }
  swiperProps.value.navigation = {
    prevEl: btnPrevRef.value,
    nextEl: btnNextRef.value,
  }
})

const preSlide = () => {
  if (!swiperRef.value) {
    return
  }

  swiperRef.value.swiper.slidePrev()
}
const nextSlide = () => {
  if (!swiperRef.value) {
    return
  }

  swiperRef.value.swiper.slideNext()
}
const slideChange = () => {
  if (!swiperRef.value) {
    return
  }
  const swiper = swiperRef.value.swiper
  if (btnNextRef.value) {
    if (swiper.isEnd) {
      btnNextRef.value.classList.add('_not-allowed')
    } else {
      btnNextRef.value.classList.remove('_not-allowed')
    }
  }
  if (btnPrevRef.value) {
    if (swiper.isBeginning) {
      btnPrevRef.value.classList.add('_not-allowed')
    } else {
      btnPrevRef.value.classList.remove('_not-allowed')
    }
  }
}
</script>

<template>
  <div
    class="bg-[#E0E8EA] pt-[clamp(4rem,3.711rem+1.0753vw,5rem)] pb-[clamp(3rem,2.422rem+2.1505vw,5rem)] overflow-hidden"
  >
    <div class="content_more _pc-1312-content">
      <div
        class="flex text-[#000000f2] mb-[1.25rem] lg:mb-[clamp(1.25rem,-0.1818rem+2.2371vw,2.5rem)]"
      >
        <h2 class="text-lg lg:text-[clamp(1.125rem,0.6955rem+0.6711vw,1.5rem)]">探索 OPPO</h2>
        <div></div>
      </div>

      <swiper-container
        ref="swiperRef"
        class="mySwiper"
        v-bind="swiperProps"
        @swiperslidechange="slideChange"
      >
        <swiper-slide v-for="i in 10" :key="i" class="box">
          <div class="text-[#000000f2]">
            <img alt="OPPO 2025 影像大赛" class="w-full h-auto" src="./image/1728-1152-home.jpg" />
            <div
              class="mt-0.5 lg:mt-1 px-[1rem] h-[6.625rem] lg:h-[clamp(7.625rem,6.3364rem+2.0134vw,8.75rem)] py-[0.75rem] lg:p-[clamp(1rem,0.7136rem+0.4474vw,1.25rem)] grid content-between bg-white rounded-b-sm"
            >
              <h2 class="text-sm sm:text-base lg:text-[clamp(1rem,0.7136rem+0.4474vw,1.25rem)]">
                OPPO 2025 影像大赛
              </h2>
              <div class="flex justify-between">
                <p class="text-sm lg:text-[clamp(0.875rem,0.7318rem+0.2237vw,1rem)]">
                  点亮感动时刻
                </p>
                <svg class="w-[1rem] lg:w-[1.5rem] aspect-square lg:mr-[0.5rem]">
                  <use href="#icon-com-arrow-right-guide" />
                </svg>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper-container>

      <div class="absolute btn-group">
        <div ref="btnPrevRef" class="_not-allowed">
          <svg @click="preSlide">
            <use href="#icon-com-arrow-left-circle" />
          </svg>
        </div>
        <div ref="btnNextRef">
          <svg @click="nextSlide">
            <use href="#icon-com-arrow-right-circle" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@reference "@/assets/main.css";

.content_more {
  @apply relative @container;
}

.mySwiper {
  position: static;

  .box {
    @apply w-auto max-sm:w-[84%] max-lg:w-[40%] overflow-hidden cursor-pointer;

    img {
      will-change: scale;
      transition: scale 0.32s cubic-bezier(0.48, 0.04, 0.52, 0.96);
    }

    &:hover img {
      scale: 110%;
    }

    svg {
      transition: translate 0.32s cubic-bezier(0.48, 0.04, 0.52, 0.96);
    }

    &:hover svg {
      translate: 8px 0;
    }
  }
}

.btn-group {
  @apply absolute top-0 right-0 hidden md:flex md:gap-[1.625rem];

  svg {
    @apply cursor-pointer w-[clamp(1.875rem,0.8384rem+1.7241cqi,2.25rem)] aspect-square;
  }

  ._not-allowed {
    cursor: not-allowed !important;

    svg {
      pointer-events: none;
      opacity: 55%;
    }
  }
}
</style>
